<template>
  <div class="card" style="margin-bottom: 10px;">
    <el-input v-model="name" prefix-icon="Search" style="width: 300px; margin-right: 10px" placeholder="请输入藏品名称查询"></el-input>
    <el-input v-model="type" prefix-icon="Search" style="width: 300px; margin-right: 10px" placeholder="请输入藏品类型查询"></el-input>
    <el-button type="primary" @click="load(1)">查询</el-button>
    <el-button type="info" style="margin: 0 10px" @click="reset">重置</el-button>
  </div>
  <div style=" margin-left: 50px ">
    <el-row>
      <el-col
          v-for="(item, index) in tableData"
          :key="item"
          :span="7"
          :offset="index % 3 > 0 ? 1 : 0"
      >
        <el-card :body-style="{ padding: '0px' }" style="margin-top: 40px">
          <div style="display: flex; justify-content: center; align-items: center; height: 200px;">
            <img
                :src="item.picture || 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'"
                class="image"
                style="width: 300px; height: 200px; object-fit: cover;"
            />
          </div>
          <div style="padding: 14px">
            <span>{{ item.name }}</span>
            <div class="bottom">
              <time class="time">{{ item.description }}</time>
              <el-button text class="button" @click="showContent(item)">查看详情</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <div style="margin: 10px 0">
    <div class="example-pagination-block">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
      >
      </el-pagination>
    </div>
  </div>
  <el-dialog
      v-model="contentVisible"
      title="藏品详情"
      width="60%"
  >
    <div class="w-e-text">
      <div class="activity-details">
        <p><strong>藏品名称:</strong> {{ collection.name }}</p>
        <p><strong>藏品图片:</strong>
          <div style="display: flex; justify-content: center; align-items: center;">
            <img :src="collection.picture || 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png'"
                 alt="" style="max-width: 100%; max-height: 400px; object-fit: contain;"/>
          </div>
        </p>
        <p><strong>藏品描述:</strong> {{ collection.description }}</p>
        <p><strong>藏品内容:</strong>
          <div v-html="collection.content"/>
        </p>
      </div>
      <div slot="footer" style="text-align: right;">
        <el-button @click="contentVisible = false">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>


<script>
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
  name: 'Card',
  data() {
    return {
      currentDate: new Date(),
      contentVisible: false,
      name: '',
      type: '',
      collection: {}, // 修改为 collection 以区分 activity
      tableData: [],
      pageNum: 1,
      pageSize: 6,
      total: 0,
    }
  },
  created() {
    this.load(this.pageNum)
  },
  methods: {
    reset() {
      this.name = ''
      this.type = ''
      this.load(this.pageNum)
    },
    load(pageNum) { // 分页查询
      if (pageNum) {
        this.pageNum = pageNum;
      }
      request.get('/collection/selectByPage', {
        params: { pageNum: this.pageNum, pageSize: this.pageSize, name: this.name, type: this.type, showState: 1 }
      }).then(res => {
        if (res && res.data && typeof res.data === 'object') {
          this.tableData = res.data.list || [];
          this.total = res.data.total || 0;
          console.log("藏品数据:", this.tableData);
        } else {
          console.error("无效的响应数据:", res);
          ElMessage.error('获取藏品数据失败，请稍后再试');
        }
      }).catch(err => {
        console.error("获取藏品数据失败:", err);
      });
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum);
    },
    showContent(item) {
      this.contentVisible = true;
      this.collection = item;
    }
  }
}
</script>

<style>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>
